<template>
	<div class="componentSetting-container">
		<Modal title="组件配置设置" v-model="ShowdialogVisible" @on-ok="ok" @on-cancel="cancel">
			<div class="btn-text">
				<div class="">debug</div>
				<i-switch v-model="form.debugSwitch" style=""></i-switch>
			</div>
			<div class="btn-text">
				<div class="marginTop">通话布局切换</div>
				<i-switch v-model="form.confirmCallLayoutSwitch" style=""></i-switch>
			</div>
			<div class="btn-text">
				<div class="marginTop">麦克风控制</div>
				<i-switch v-model="form.microphoneControlSwitch" style=""></i-switch>
			</div>
			<div class="btn-text">
				<div class="marginTop">摄像头切换</div>
				<i-switch v-model="form.cameraSwitch" style=""></i-switch>
			</div>
			<div class="btn-text">
				<div class="marginTop">语音/视频升降级</div>
				<i-switch v-model="form.voicevideoSwitch" style=""></i-switch>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	data() {
		return {
			ShowdialogVisible: false,
			form: {
				debugSwitch: true, // 是否开启debug模式
				confirmCallLayoutSwitch: true, // 通话布局
				microphoneControlSwitch: true, // 麦克风控制
				cameraSwitch: true, // 摄像头控制
				voicevideoSwitch: true // 升降级控制
			}
		};
	},
	props: ['dialogVisible'],
	mounted() {
		this.ShowdialogVisible = this.dialogVisible;
		if(localStorage.getItem('debug') && localStorage.getItem('debug') == 0){
			this.form.debugSwitch = false;
		}
		if(localStorage.getItem('layout') && localStorage.getItem('layout') == 0){
			this.form.confirmCallLayoutSwitch = false;
		}
		if(localStorage.getItem('microphone') && localStorage.getItem('microphone') == 0){
			this.form.microphoneControlSwitch = false;
		}
		if(localStorage.getItem('camera') && localStorage.getItem('camera') == 0){
			this.form.cameraSwitch = false;
		}
		if(localStorage.getItem('upgrade') && localStorage.getItem('upgrade') == 0){
			this.form.voicevideoSwitch = false;
		}
	},
	methods: {
		ok() {
			this.ShowdialogVisible = false;
			console.log('form', this.form);
			this.$emit('ok', this.form);
			localStorage.setItem('debug',this.form.debugSwitch ? 1 : 0);
			localStorage.setItem('layout',this.form.confirmCallLayoutSwitch ? 1 : 0);
			localStorage.setItem('microphone',this.form.microphoneControlSwitch ? 1 : 0);
			localStorage.setItem('camera',this.form.cameraSwitch ? 1 : 0);
			localStorage.setItem('upgrade',this.form.voicevideoSwitch ? 1 : 0);
		},
		cancel() {
			this.ShowdialogVisible = false;
			this.$emit('cancel');
		}
	}
};
</script>

<style lang="less" scoped>
.btn-text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	// flex-direction: column;
	// width: 100%;
	// height: 100%;
	// position: relative;
}
.btn {
	width: 50%;
	height: 42px;
	/*background:rgba(242,242,242,1);*/
	font-size: 15px;
	font-family: PingFangSC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 42px;
	// margin-top: 60px;
	border-radius: 21px;
	text-align: center;
}
.marginLeft {
	margin-left: 50px;
}
.marginTop {
	margin-top: 20px;
}
</style>
